<template>
	<view>

		<view class=" hede-Bottom-line banmi_flex  bg-white">
			<view class="banmi_flex">
				<button class="m-l-20" style="padding: 0;background:transparent;" @click="on_nav(index,vo.id)"
					v-for="(vo,index) in menu_list">
					<text :class="nav_index==index ? 'banmi_top_menu_selected' : 'banmi_top_menu'">{{vo.name}}</text>
				</button>
			</view>
		</view>
		<view class="">
			<view class="bg-white" style="height: 87vh;">
				<view class="" v-if="nav_index==0||nav_index==1">
					<view class="bm-classify">
						<view class="plugin_list_li" v-for="(vo,index) in list">
							<image class="b-r-5" :src="vo.plugin_icon" style="width:100%;" mode="widthFix">
							</image>
							<view class="banmi_flex j-b  p-10  a-c">
								<view class="aRow">
									<text class="f28">{{vo.plugin_name}}</text>
								</view>
								<view class="">
									<text class="f26">{{vo.version}}</text>
								</view>
							</view>
							<view class="banmi_flex j-b a-c p-10">
								<view>
									<button v-if="vo.is_install&&vo.development==false" @click="on_details(vo.id)"
										type="primary" size="mini" class="banmi_but">详情/更新</button>
									<button v-if="vo.is_install&&vo.development==true" @click="on_pack(vo.id)"
										type="primary" size="mini" class="banmi_but">打包数据库</button>
								</view>

								<view class="">
									<button @click="on_Install(index,vo.is_install)"
										:type="vo.is_install?'default':'primary'" size="mini"
										class="banmi_but">{{vo.is_install?'卸载':'安装'}}</button>
								</view>
							</view>
							<view class="banmi_flex j-c a-c p-10" v-if="vo.is_branch">
								<view class="">
									<view class="p-b-10">
										检测到有分支版本-{{vo.branch_name}}
									</view>
									<button @click="on_Install_branch(index)" type="primary" size="mini"
										class="banmi_but">安装</button>
								</view>

							</view>
						</view>
					</view>
					<view class="p-20 banmi_flex j-c" v-if="list.length==0" @click="onaaaa">
						<text class="c_7">您还没有安装任何应用</text>
					</view>
				</view>
				<view v-if="nav_index==3">

					<view class="">
						<iframe :src="shop_url" style="width: 100%;height: 85vh;" id="myframe" name="iframePage"
							frameborder="0"></iframe>
					</view>
				</view>
				<view v-if="nav_index==2">
					<view class="">
						<iframe :src="buy_url" style="width: 100%;height: 85vh;" id="myframe" name="iframePage"
							frameborder="0"></iframe>
					</view>
				</view>
				<view v-if="nav_index==4">
					<view class="">
						<iframe :src="add_url" style="width: 100%;height: 85vh;" id="myframe" name="iframePage"
							frameborder="0"></iframe>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-beizhu is_type="password" cancelText="取消" confirmText="确认执行" lei="0" name="请输入插件管理密码"
				:keya="keya" @confirm="on_ok">
			</uni-popup-beizhu>
		</uni-popup>
		<detailss ref="component_details" @confirm="init" :update_url="update_url">
		</detailss>
		<add ref="component_add" @confirm="confirm_add" :catalogue="catalogue">
		</add>
		<msgs ref="component_msgs">
		</msgs>


		<view v-if="isPlugin" style="position:fixed;z-index: 999;top: 0px;left: 0;">
			<uni-popup-plugin :plugin_id="plugin_id" :catalogue="catalogue" :pwa="pwa"
				:catalogue_branch="catalogue_branch" :ttkey="ttkey" :t="t" :sign="sign"
				:add_plugin_type="add_plugin_type" :order_id="order_id" title="下载应用" @confirm="confirm_i"
				@close="pluginclose">
			</uni-popup-plugin>
		</view>


	</view>
	</view>
</template>

<script>
	import detailss from './details.vue';
	import msgs from './msgs.vue';
	import add from './add.vue';
	export default {
		components: {
			detailss,
			add,
			msgs
		},
		data() {
			return {
				menu_list: [{
						"id": 0,
						"name": "已安装",
					},
					{
						"id": 1,
						"name": "未安装",
					},
					{
						"id": 2,
						"name": "已购买",
					},
					{
						"id": 3,
						"name": "应用市场",
					},
					{
						"id": 4,
						"name": "创建新应用",
					},
				],
				nav_index: 0,
				list: [],
				keya: 'plugin_pwa',
				goods_list: [],
				api_img: '',
				plugin_id: '',
				catalogue: '',
				shop_url: '',
				buy_url: '',
				update_url: '',
				ttkey: '',
				t: '',
				sign: '',
				order_id: '',
				catalogue_branch: '',
				isPlugin: false,
				pwa: "",
				add_plugin_type: ""

			}
		},

		onLoad(on) {
			let that = this;
			window.addEventListener('message', function(event) {
				if (event.data.id >= 1) {
					that.event = event;
					that.aevent();

				}
			}, false);
			this.init()
			this.api_init()
		},

		methods: {
			aevent() {
				let that = this;
				var event = that.event;
				if (event.data.type == 'detection') {
					that.ttkey = event.data.ttkey
					that.t = event.data.t
					that.sign = event.data.sign
					that.catalogue = event.data.catalogue
					this.on_plugin_testing();

				} else if (event.data.type == 'plugin_add') {
					that.ttkey = event.data.ttkey;
					that.t = event.data.t;
					that.sign = event.data.sign;
					that.catalogue = event.data.catalogue;
					that.plugin_name = event.data.plugin_name;
					that.plugin_id = event.data.plugin_id;
					if (!that.plugin_name) {
						uni.showToast({
							title: '请输入插件名称',
							icon: 'none'
						})
						return
					}
					if (!this.catalogue) {
						uni.showToast({
							title: '请输入插件别名目录',
							icon: 'none'
						})
						return
					}
					this.pl_type = 5;
					this.$refs.alertDialog.open()
				} else {
					this.pl_type = 4;
					this.$refs.alertDialog.open()
				}

			},
			aevent1() {
				let that = this;
				var event = that.event;
				that.ttkey = event.data.ttkey
				that.t = event.data.t
				that.sign = event.data.sign
				if (event.data.type == 'install') {
					that.catalogue = event.data.catalogue
					that.plugin_id = event.data.id
					that.order_id = event.data.order_id
					that.catalogue_branch = event.data.catalogue_branch
					if (that.catalogue_branch) {
						uni.showModal({
							title: '提示',
							content: '请先备份plugin/' + event.data.catalogue + '/插件目录,下载分支插件会覆盖主插件,以免出现兼容问题',
							confirmText: '确认下载',
							success: function(res) {
								if (res.confirm) {
									that.isPlugin = true;
								}
							}
						});
					} else {
						that.isPlugin = true;
					}

				} else if (event.data.type == 'plugin_add') {
					that.catalogue = event.data.catalogue
					this.pl_type = 5;

				}
			},

			async on_plugin_add() {

				var that = this
				this.$refs.alertDialog.close()

				uni.showLoading({
					title: '正在创建中,请耐心等待，不要关闭窗口',
					mask: true
				})
				var find = {
					catalogue: this.catalogue,
					plugin_ttkey: this.ttkey,
					plugin_t: this.t,
					plugin_sign: this.sign,
					plugin_pwa: this.pwa,
					plugin_name: this.plugin_name,
					add_plugin_id: this.plugin_id

				}
				const ret = await this.Banmikeji.pluginlist_add_plugin(find);
				uni.hideLoading()
				if (ret.status == 200) {
					this.$refs.component_add.init(this.catalogue)
				}
				if (ret.status == 405) {
					this.add_plugin_type = "add";
					uni.showModal({
						title: '提示',
						content: ret.msg,
						confirmText: "立即下载",
						success: function(res) {
							if (res.confirm) {
								that.isPlugin = true;
							}
						}
					});
					return

				}


				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})


			},
			async on_plugin_testing() {
				if (!this.catalogue) {
					uni.showToast({
						title: '请输入插件别名目录',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在检测中...',
					mask: true
				})
				var find = {
					catalogue: this.catalogue,
					plugin_ttkey: this.ttkey,
					plugin_t: this.t,
					plugin_sign: this.sign,
					plugin_pwa: this.pwa,

				}

				const ret = await this.Banmikeji.pluginlist_plugin_testing(find);

				uni.hideLoading()
				uni.showModal({
					title: '提示',
					content: ret.msg,
					confirmText: '知道了',
					showCancel: false,
					success: function(res) {

					}
				});

			},

			pluginclose() {
				this.$refs.alertDialog.close()
				this.isPlugin = false;

			},
			async on_pack(id) {

				let requestParams = {
					plugin_id: id
				};
				uni.showLoading({
					title: "正在备份中",
					mask: true
				})
				const ret = await this.Banmikeji.Pluginlist_pack(requestParams);
				uni.hideLoading()
				uni.showModal({
					title: '提示',
					content: ret.msg,
					success: function(res) {

					}
				});

			},
			confirm_i(catalogue_branch) {
				this.pluginclose();
				if (catalogue_branch) {
					this.nav_index = 0;
					this.init()
					return
				}
				this.nav_index = 1;
				this.no_installed_list()
			},
			async init() {
				let requestParams = {};
				const ret = await this.Banmikeji.Pluginlist_list(requestParams);

				this.list = ret.data.data;
				this.total = ret.data.total;

			},
			async api_init() {
				let requestParams = {};
				const ret = await this.Banmikeji.plugin_api_shop(requestParams);
				this.buy_url = ret.data.buy_url;
				this.shop_url = ret.data.url;
				this.update_url = ret.data.update_url;
				this.add_url = ret.data.add_url;


			},
			async no_installed_list() {
				let requestParams = {};
				const ret = await this.Banmikeji.Pluginlist_no_list(requestParams);
				this.list = ret.data;
			},
			async on_ajax_del(index, pwa) {
				var that = this;
				var catalogue = this.list[index]['catalogue'];
				uni.showLoading({
					title: '正在卸载中...',
					mask: true
				})
				let requestParams = {
					catalogue: catalogue,
					plugin_pwa: pwa,
				};
				const ret = await this.Banmikeji.Pluginlist_uninstall(requestParams);

				setTimeout(function() {
					uni.hideLoading();
					uni.showToast({
						title: ret.msg,
						icon: "none",
						duration: 3000
					})

					if (ret.status == 200) {

						setTimeout(function() {
							location.reload();
						}, 2000);

					}


				}, 2000);

			},
			on_Install_branch(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '安装分支前请先备份网站数据,避免安装途中出现问题',
					confirmText: '确认安装',
					success: function(res) {
						if (res.confirm) {
							that.plugin_index = index;
							that.pl_type = 3;
							that.$refs.alertDialog.open()
						}
					}
				});
			},
			//安装分支版本
			async Install_branch_ajax(index, pwa) {
				var catalogue = this.list[index]['catalogue'];
				var that = this;
				uni.showLoading({
					title: '正在安装中...',
					mask: true
				})
				let requestParams = {
					catalogue: catalogue,
					plugin_pwa: pwa,
				};

				const ret = await this.Banmikeji.Pluginlist_Install_branch(requestParams);
				if (ret.status == 405) {
					uni.hideLoading()
					this.$refs.component_msgs.init(ret.msg)
					return
				}
				setTimeout(function() {
					if (ret.status == 200) {
						that.nav_index = 0;
						that.init()
					}
					uni.showToast({
						title: ret.msg,
						icon: "none"
					})
					uni.hideLoading();
				}, 500);


			},
			async on_Install(index, Install) {
				if (Install) {
					this.on_dir_del(index);
					return
				}


				var that = this;
				uni.showModal({
					title: '确认要安装吗',
					content: '请先备份数据和数据库,以免安装中途出现问题',
					confirmText: '确认安装',
					success: function(res) {
						if (res.confirm) {
							that.plugin_index = index
							that.pl_type = 2;
							that.$refs.alertDialog.open()
						}
					}
				});
			},
			async ajax_Install(index, pwa) {
				var catalogue = this.list[this.plugin_index]['catalogue'];
				var that = this;
				uni.showLoading({
					title: '正在安装中...',
					mask: true
				})
				let requestParams = {
					catalogue: catalogue,
					plugin_pwa: pwa,
				};

				const ret = await this.Banmikeji.Pluginlist_index_Install(requestParams);
				if (ret.status == 405) {
					uni.hideLoading()
					this.$refs.component_msgs.init(ret.msg)
					return
				}
				setTimeout(function() {

					uni.showToast({
						title: ret.msg,
						icon: "none",
						duration: 3000
					})
					uni.hideLoading();
					if (ret.status == 200) {
						setTimeout(function() {
							location.reload();
						}, 2000);
					}


				}, 500);
			},
			on_details(id) {
				this.id = id;
				this.$refs.component_details.init(id)
			},
			on_add() {
				this.$refs.component_add.init(0)
			},
			on_ok(pwa) {
				var that = this;
				this.pwa = pwa;
				if (this.pl_type == 1) {
					that.on_ajax_del(that.plugin_index, pwa);
				} else if (this.pl_type == 2) {
					that.ajax_Install(that.plugin_index, pwa);
				} else if (this.pl_type == 3) {
					that.Install_branch_ajax(that.plugin_index, pwa);
				} else if (this.pl_type == 4) {
					that.aevent1();
				} else if (this.pl_type == 5) {

					this.on_plugin_add()
				}






			},
			on_dir_del(index) {
				var that = this;
				uni.showModal({
					title: '确认卸载吗',
					content: '卸载应用后数据将被删除,请先备份数据后在卸载',
					confirmText: '确认卸载',
					success: function(res) {
						if (res.confirm) {
							that.plugin_index = index
							that.pl_type = 1;
							that.$refs.alertDialog.open()
						}
					}
				});
			},
			on_nav(index, id) {
				this.nav_index = index;
				if (id == 0) { //已安装
					this.page = 1;
					this.init();
				} else if (id == 1) { //未安装
					this.no_installed_list();
				}
			}
		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	@media screen and (min-width: 560px) {
		.plugin_list_li {
			text-align: center;
			flex: 0 0 14%;
			font-size: 24upx;
			margin: 1%;
			border: solid 1px #EFEFEF;
			border-radius: 5px;
			padding-bottom: 20px;
		}
	}

	@media screen and (max-width: 500px) {
		.plugin_list_li {
			text-align: center;
			flex: 0 0 46%;
			font-size: 24upx;
			margin: 1%;
			border: solid 1px #EFEFEF;
			border-radius: 5px;
			padding-bottom: 20px;
		}
	}


	button {
		padding: 0px;
	}
</style>